<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .Count {
        /* display: flex; */
        /* line-height: 30px; */
      }
      .Count p {
      }
      .Count button {
        /* width: 200px;
        height: 30px; */
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      const { useState } = React;
      function Count(props) {
        // props叫什么都可以，可以起其他的名字，但是要和下面使用到的时候保持一致，但是为了规范易懂，就用了props
        // const { step } = props;
        const step = props.step || 1;
        const [count, setCount] = useState(0);
        // const [title, setTitle] = useState("当前标题");
        // const keyUpHandle = (e) => setTitle(e.target.value);
        const [list, setList] = useState([]);
        const keyUpHandle = (e) => {
          if (e.keyCode === 13) {
            setList([{ id: Date.now(), content: e.target.value }, ...list]);
          }
        };
        return (
          <div className="Count">
            <p>当前步长为：{step}</p>
            <ul>
              {list.map((item) => (
                <li key={item.id}>{item.content}</li>
              ))}
            </ul>
            <input
              type="text"
              placeholder="请输入内容"
              /* onKeyUp={(e) => e.target.value} */
              onKeyUp={keyUpHandle}
            />
            <button onClick={() => setCount(count + step)}>
              计数值为：{count}
            </button>
          </div>
        );
      }
      ReactDOM.render(
        <div>
          <Count step={5} />
          <Count step="5" />
          <Count />
          <Count />
        </div>,
        document.getElementById("app")
      );
    </script>
  </body>
</html>
